<template>
  <div id="img_log" style="margin-top: 0px">
    <div class="login" style="">
      <div>
        <el-input placeholder="请输入邮箱" v-model="userEmail" clearable class="input_style"></el-input>
      </div>
      <div>
        <el-input placeholder="请输入密码" v-model="userPassword" show-password class="input_style"></el-input>
      </div>
      <div class="submit">
        <el-button type="primary" @click="login" class="login_style">登录</el-button>
        <el-button type="primary" @click="toRegister" class="login_style">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      userEmail: '',
      userPassword : '',
    }
  },
  methods:{
    toRegister(){
      this.$router.push({path:"/register"})
    },
    login(){
      this.$http({
        url:"/cbug/user/login",
        method:"post",
        data:{userEmail:this.userEmail,userPassword:this.userPassword}
      }).then(res=>{
        if(res.data.resultCode === 1)
          alert("Failure!")
        else{
          window.sessionStorage.setItem("id",res.data.userId)
          window.sessionStorage.setItem("name",res.data.userName)
          window.sessionStorage.setItem("token",res.data.token)
          window.sessionStorage.setItem("state","login")
        }
      }).catch(err=>{
        alert("Server Error!")
      })
    }
  }
}
</script>

<style>
#img_log{
  background-color: #c6e2ff;
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.login{
  width: 300px;
  margin:auto;
}
.input_style{
  width: 300px;
  margin-bottom: 10px;
}
.submit{
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login_style{
  width: 48%;
}
</style>
